#define upload_image(name, label, value, placeholder, desc)
<style type="text/css">
.uploadimage{
  font-size: 33px;
  color: #1E9FFF;
  background: #FBFBFB;
  cursor: pointer;
  float: right;
  position: relative;
  margin-top: -37px;
  margin-right: 2px;
  padding: 0 4px;
  border-radius: 2px;
}
</style>
<div class="layui-row">
  <div class="layui-col-md4">
    <div class="layui-form-item">
      <label class="layui-form-label">#(label)</label>
      <div class="layui-input-block" id="id_#(name)">
        <input type="text" name="#(name)" lay-verify="#(name)" value="#(value)" placeholder="#(placeholder)" autocomplete="off" spellcheck="false" class="layui-input" style="padding-right:40px; cursor:default;" disabled>
      </div>
      <i id="#(name)_upload" title="选择图片" class="layui-icon uploadimage" style="z-index: 9999;">&#xe608;</i>
    </div>
  </div>
  <div id="#(name)_text" class="layui-col-md8 desc">#(desc)</div>
</div>
<div class="layui-row">
    <img class="layui-col-md5 layui-upload-img" id="#(name)_preview" style="margin-bottom: 15px;display: none;padding: 1px;border: 1px solid red;">
</div>
<script>
//JavaScript代码区域
$(function(){
  //在body中添加元素
  $("body").append('<div><img id="imagePreview" src="#(value)" style="max-width:500px;display:none;"></div>');
  //设置层的top和left坐标
  $("#imagePreview").css("position", "absolute").css("top", 20).css("z-index", 99999);
  // 动画显示层
  $("#id_#(name)").mouseover(function(e){
    $("#imagePreview").css("left",e.pageX + 20).fadeIn(500);
  })
  //鼠标移开删除大图所在的层
  .mouseout(function(){ $("#imagePreview").fadeOut(); })
  //鼠标移动时改变大图所在的层的坐标
  .mousemove(function(e){ $("#imagePreview").css("left",e.pageX + 20); });
});
layui.use(['upload'], function(){
  var upload = layui.upload;
  var previewObj = $('##(name)_preview');
  var uploadObj = $('[name=#(name)]');
  var resultObj = $('##(name)_text');
  //普通图片上传
  var uploadInst = upload.render({
    elem: '##(name)_upload'
    ,url: '#(adminRoot)/upload/image'
    ,title: "图片上传"
    ,field: "image"
    ,before: function(obj){
      ToastLoading('正在上传...');
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        previewObj.show();
        previewObj.attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(ret){
      ToastShow(ret.code, ret.msg, ret.url);
      //结果处理
      if (ret.state == 'ok') {
        uploadObj.val(ret.path);
        resultObj.html('<span style="color: #1E9FFF;">' + ret.msg + '</span>');
      }
    }
    ,error: function(){
      ToastErr('上传失败');
      //演示失败状态，并实现重传
      resultObj.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
      resultObj.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});
</script>
#end